<template>
    <div class="wrapper-top" v-if="chaptersTemp">
        <header class="header row" :style="{height: headerHeight + 'px'}">
            <div class="header-wrapper row">
                <div class="nav-cell row chapters">
                    <text class="main-text">目录</text>
                    <text class="chapters-length text">(共{{chaptersTemp.length}}章)</text>
                </div>
                <div class="flex-1"></div>
                <div class="nav-cell row sort" @click="onSort">
                    <text class="sort-text">{{ sort ? '倒序':'正序' }}</text>
                </div>
            </div>
        </header>
        <scroller class="wrapper list" :style="{height: listHeight - headerHeight + 'px'}">
            <div v-for="(item,index) in chaptersTemp" @click="goRead(index)" :ref="'chapter-'+index">
                <text class="item text">{{ item.title}}</text>
            </div>
        </scroller>
    </div>
</template>

<script>
    const dom = weex.requireModule('dom');
    export default {
        props: {
            chapters: {
                type: Array,
                default: undefined
            },
            sort: {
                type: Boolean,
                default: false
            },
            listHeight: {
                type: Number,
                default: 1344
            },
            currentChapter:{
                type: Number,
                default: 0
            }
        },

        data() {
            return {
                headerHeight: 80,
            }
        },
        mounted(){
            this.goIndex()
        },
        computed: {
            chaptersTemp: {
                set: function (value) {
                    this.reverseChapters = value;
                },
                get: function () {
                    return this.chapters;
                }
            },
        },
        methods: {
            goRead(chapterIndex) {
                this.$emit('goRead', {chapterIndex: chapterIndex});
            },
            onSort() {
                this.chaptersTemp.reverse();
                this.$emit('onSort',{});
            },
            goIndex(){
                let el=this.$refs['chapter-' + this.currentChapter];
                el && dom.scrollToElement(el, {offset: 0});
            }
        },
        watch:{
            sort(){
                this.goIndex();
            }
        }
    }
</script>

<style scoped>
    .wrapper-top{
        position: relative;
    }
    .row {
        flex-direction: row;
    }

    .wrapper {
        /*margin-top: 80px;*/
        position: relative;
        /*overflow: scroll;*/
    }
    .header-wrapper,
    .header{
        background-color: #ffc300;
    }
    .header{

    }
    .header-wrapper{
        flex: 1;
    }
    /*.header{*/
        /*position: fixed;*/
        /*left: 0;*/
        /*top: 0;*/
    /*}*/

    .list {
        position: relative;
        flex: 1;
        background-color: #f6f6f6;
        overflow: auto;
    }

    .padding {
        width: 750px;
        height: 80px;
    }

    .text {
        color: #4f4f4f;
    }

    .header-wrapper {
        align-content: space-between;
        align-items: flex-end;
    }

    .nav-cell {
        height: 80px;
        background-color: #ffc300;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .flex-1 {
        flex: 1;
    }

    .chapters {
        padding-left: 20px;
    }

    .sort {
        justify-self: flex-end;
        margin-right: 40px;
    }

    .sort-text {
    }

    .item {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
        border-bottom-color: #4f4f4f;
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
</style>